<template>
  <div class="members-accounts">
    <h3>账户信息</h3>

    <!-- 基本信息 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>基本信息</span>
        </div>
      </template>
      <div>
        <p><strong>用户名：</strong>{{ userInfo.username }}</p>
        <p><strong>邮箱：</strong>{{ userInfo.email }}</p>
        <p><strong>手机号：</strong>{{ userInfo.phone }}</p>
        <p><strong>注册时间：</strong>{{ userInfo.registerTime }}</p>
      </div>
    </el-card>

    <!-- 地址管理 -->
    <el-card class="box-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>地址管理</span>
        </div>
      </template>
      <el-table :data="addressList" style="width: 100%">
        <el-table-column prop="name" label="收货人"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="address" label="详细地址"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button @click="openEditDialog(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="confirmDeleteAddress(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


    <!-- 编辑地址弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑地址" width="40%">
      <el-form :model="editingAddress" label-width="90px">
        <el-form-item label="收货人">
          <el-input v-model="editingAddress.name" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editingAddress.phone" />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="editingAddress.address" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAddress">保存</el-button>
      </template>
    </el-dialog>

    <!-- 删除地址确认弹窗 -->
    <el-dialog v-model="deleteDialogVisible" title="确认删除" width="30%">
      <span>确定要删除该地址吗？</span>
      <template #footer>
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="deleteAddress">确认删除</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 用户基本信息
const userInfo = ref({
  username: '张三',
  email: 'zhangsan@example.com',
  phone: '13800138000',
  registerTime: '2023-01-01'
})

// 地址列表
const addressList = ref([
  {
    id: 1,
    name: '张三',
    phone: '13800138000',
    address: '北京市朝阳区XX街道'
  },
  {
    id: 2,
    name: '李四',
    phone: '13900139000',
    address: '上海市浦东新区YY路'
  }
])

// 当前编辑的地址对象
const editingAddress = ref({})
const editDialogVisible = ref(false)

// 删除确认弹窗控制
const deleteDialogVisible = ref(false)
const addressToDelete = ref(null)

// 打开编辑弹窗
const openEditDialog = (row) => {
  editingAddress.value = { ...row }
  editDialogVisible.value = true
}

// 保存地址（模拟更新）
const saveAddress = () => {
  const index = addressList.value.findIndex(addr => addr.id === editingAddress.value.id)
  if (index !== -1) {
    addressList.value.splice(index, 1, editingAddress.value)
    ElMessage.success('地址已更新')
  }
  editDialogVisible.value = false
}

// 删除地址：先打开确认弹窗
const confirmDeleteAddress = (row) => {
  addressToDelete.value = row
  deleteDialogVisible.value = true
}

// 确认删除
const deleteAddress = () => {
  const index = addressList.value.findIndex(addr => addr.id === addressToDelete.value.id)
  if (index !== -1) {
    addressList.value.splice(index, 1)
    ElMessage.warning('地址已删除')
  }
  deleteDialogVisible.value = false
}


</script>

<style scoped>
.members-accounts {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
}
</style>